<template>
  <Transition name="fade">
    <div
      v-if="visible"
      class="fixed inset-0 flex items-center justify-center bg-black/50 z-50"
      :class="{ 'cursor-wait': visible }"
    >
      <div class="bg-white rounded-lg p-6 flex flex-col items-center shadow-xl">
        <a-spin :size="40" :dot="false">
          <template #icon>
            <BaseIcon name="icon-loading" />
          </template>
        </a-spin>
        <span v-if="text" class="mt-3 text-gray-600">{{ text }}</span>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import BaseIcon from './BaseIcon.vue'
import '@/assets/styles/components/loading-spinner.css'

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  text: {
    type: String,
    default: '加载中...',
  },
})
</script>
